<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>基本语法</title>
  <style>
    /* 边距合并 */
    * {margin: 0; padding:0}
  </style>
</head>
<body>
  <h1>SEO标题搜索优化</h1>
  <h2>SEO标题搜索优化</h2>
  <h3>SEO标题搜索优化</h3>
  <p>段落标签</p>
  <p>段落标签</p>
  <p>段落标签</p>

  用户名: <input type="text" data-categoryName="un" data-categoryId="1001" name="username" id="username" placeholder="username"/> <br>
  性别: <input type="radio" data-categoryName2="un2" data-categoryId2="2002" name="gender" id="gender" checked>

</body>
<script>
  window.onload = function() {
    // 自定义属性
    const input1 = document.querySelector('#username')
    const input2 = document.querySelector('#gender')
    console.log(input1.dataset, input2.dataset)
    const {categoryname, categoryid} = input1.dataset
    if (categoryname && categoryid) {
      console.log('属性齐全')
    }

    const {categoryname2, categoryid2} = input2.dataset
    if (categoryname2 && categoryid2) {
      console.log('性别属性齐全')
    }

    // 
    const {type, name, id, placeholder} = input1
    console.log(type, name, id, placeholder)

    const body = document.body
    body.addEventListener('click', event => {
      const {categoryname, categoryid} = event.target.dataset
      console.log(categoryname, categoryid)
      if (categoryname && categoryid) {
        console.log('事件委托: 点击的是目标元素')
      }
    })
  }
</script>
</html>